<template>
	<view class="container">


		<!-- 待确认内容区 -->
		<scroll-view class="confirm-scroll" scroll-y style="height:90vh" :refresher-enabled="true"
			@refresherrefresh="refreshList" :refresher-triggered="isRefreshed">
			<view class="header">
				<!-- 占位元素 start-->
				<view style="height:30rpx;width:100%;background-color: #fff"></view>
				<!-- 占位元素 end-->
				<!-- 船方和jointtop导航 start -->
				<view class="bench-header" v-if="showHeader">
					<view v-for="(item,index) in tabs" class="bench-header-item"
						:class="current == index ? 'bench-header-item-active': ''" @click="changeTab(index)">
						{{item}}
					</view>
				</view>
				<!-- 船方和jointtop导航 end-->
				<view class="drawer" v-if="showHeader">
					<view class="drawer-item" v-for="(item,index) in drawerTabs" :key="index"
						@click="changeDrawer(index + 1)">
						<i class="icon" :class="currentDrawer == index + 1 ? [item.icon,'icon-active']:item.icon"></i>
						<view class="drawer-item-text" :class="{'text-active': currentDrawer == index + 1 }">
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="icon icon-zhankai" @click="showHeader = !showHeader"></view>
			</view>
			<view class="detail-repair_content" v-if="confirmList && JSON.parse(JSON.stringify(confirmList)).length > 0">
				<u-checkbox-group class="detail-repair_group">
					<template v-for="(item, index) in confirmList"
						@click="$goPage('/repair/edit',{title:'编辑',project:item.Project,iid:item.Iid,stat:6})">
						<view class="detail-repair_item">

							<view class="u-flex"
								style="width: 100%;align-items: flex-end;justify-content:space-between">
								<view>
									<u-checkbox v-if="item.IsConfirm==1||item.IsConfirm==5"
										class="detail-repair_item--checkbox" @change="confirmChange"
										v-model="item.Checked" :name="index"></u-checkbox>
									<text v-if="item.IndexNo != ''" class="detail-repair_item--order"
										style="padding:0 10rpx;text-align: center;font-size: 10rpx;color: #ff9900;border: 1rpx solid #F9d39b;border-radius: 8rpx;">{{item.IndexNo}}</text>
									<u-tag :text="$t('project.confirm_stat.'+ item.IsConfirm)" type="warning"
										style="margin-left: 10rpx" />
									<!-- <u-tag v-if="item.IsConfirm == 5" :text="i18n.emp_rej_edit"
														type="warning" style="margin-left: 10rpx" /> -->

								</view>
								<text v-if="item.IsConfirm==1||item.IsConfirm==5"
									@click="$goPage('/repair/edit',{title: $t('project.btn_edit'),project:item.Project,iid:item.Iid,stat:6})"
									class="block" style="color:#3B8DFF;font-size:28rpx">
									<u-icon name="edit-pen"></u-icon>
									{{$t('project.rej_edit')}}
								</text>
							</view>

							<view class="detail-repair_item--name u-flex"
								style="padding-top: 6rpx;color:#3B8DFF;font-size:32rpx"
								@click="goProject(item.Project, item.Iid)">
								<text
									class="u-flex-1"><label>【{{ $t('project.add_sub_pro.'+item.ChangeType)}}】</label>{{item.ItemName}}</text>
							</view>
							<!--   v-if="item.IsConfirm==3||item.IsConfirm==4||item.IsConfirm==7||item.IsConfirm==8"
									<view class="detail-repair_item--name u-flex"  v-else
										style="padding-top: 6rpx;color:#3B8DFF;font-size:32rpx">
										<text
											class="u-flex-1"><label>【{{ i18n.add_sub_pro[item.ChangeType]}}】</label>{{item.ItemName}}</text>
									</view> -->

							<view class="detail-repair_item--info">
								<view class="detail-repair_item--child">{{$t('project.unit')}}：<text
										class="detail-repair_item--value">{{item.Unit}}</text></view>
								<view class="detail-repair_item--child">{{$t('project.price')}}：<text
										class="detail-repair_item--number">{{item.PriceText}}</text></view>
								<view class="detail-repair_item--child">{{$t('project.quantity')}}：<text
										class="detail-repair_item--value">{{item.QtyText}}</text></view>
								<view class="detail-repair_item--child">{{$t('project.amount')}}：<text
										class="detail-repair_item--value">{{item.AmountText}}</text></view>
								<!-- <view class="detail-repair_item--child">{{i18n.amount}}：<text
												class="detail-repair_item--value">{{item.AmountText}}</text></view> -->

								<view class="detail-repair_item--child textarea">{{$t('project.remark')}}：<text
										class="detail-repair_item--value">{{item.Rmk}}</text></view>

							</view>

						</view>
					</template>
				</u-checkbox-group>
			</view>
			<view class="empty-wrap" v-if="JSON.parse(JSON.stringify(confirmList)).length == 0">
				<u-empty :text="$t('project.empty_txt')" mode="list"></u-empty>
			</view>
		</scroll-view>

		<view class="confirm-footer" v-if="confirmFooterDisplay && JSON.parse(JSON.stringify(confirmArr)).length > 0">
			<u-checkbox class="list-checkbox u-m-l-20" v-model="allChecked" label-size="28" @change="checkedAll">
				{{$t('project.select_all')}}
			</u-checkbox>
			<u-button size="mini" @click="confirmReject">{{$t('project.btn_reject')}}</u-button>
			<u-button size="mini" type="primary" plain @click="confirmSubmit(2)">{{$t('project.btn_confirm')}}
			</u-button>
		</view>
		<!-- 驳回备注 -->
		<u-modal v-model="showRemark" :title="$t('project.btn_reject')" :show-cancel-button="true"
			:confirm-text="$t('project.btn_confirm')" :cancel-text="$t('project.btn_cancel')" @confirm="confirmSubmit(3)">
			<view class="reject-content">
				<u-input :placeholder="$t('project.pub_tips')" v-model="rmkcontent" type="textarea" height="140" />
			</view>
		</u-modal>

	</view>
</template>

<script>
	import uniSegmented from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmented
		},
		// props: {
		// 	project: {
		// 		type: String || Number,
		// 		default: 0
		// 	}
		// },
		props: ["project", "tab", "confirm"],
		data() {
			return {
				showHeader: true,
				tabs: [this.$t('project.ship'), 'JOINTTOP'],
				current: 0,
				currentDrawer: 1,
				confirmList: [],
				confirmArr: [],
				confirmFooterDisplay: false,
				allChecked: false,
				showRemark: false,
				rmkcontent: '',
				isRefreshed: false, //是否开启下拉刷新
			}
		},
		mounted() {
			this.current = this.tab
			this.changeTab(this.current);
			switch (parseInt(this.confirm)) {
				case 1:
				case 2:
					this.currentDrawer = 1
					break;
				case 3:
				case 4:
					this.currentDrawer = 3
					break;
				case 5:
				case 6:
					this.currentDrawer = 4
					break;
				case 7:
				case 8:
					this.currentDrawer = 2
					break;
				default:
					this.currentDrawer = 1
			}
			this.getConfirmList()
			uni.$once('refreshList', () => {
				console.log("监听到了返回页面，正在重新刷新数据")
				this.getConfirmList()
			})
		},
		computed: {
			i18n() {
				return this.$t('project')
			},
			mine() {
				return this.$t('mine')
			},
			drawerTabs() {
				return [{
						label: this.$t('project.no_confirmed'),
						icon: 'icon-daiqueren'
					},
					{
						label: this.$t('project.confirmed'),
						icon: 'icon-querenhetongquerenhetongqueding'
					},
					{
						label: this.$t('project.reject'),
						icon: 'icon-bohui'
					},
					{
						label: this.$t('project.rej_edit'),
						icon: 'icon-bianji2'
					}
				]
			}
		},
		methods: {
			getConfirmList() {
				var tabType = 1
				//判断当前状态tabType
				if (this.current == 0) {
					switch (this.currentDrawer) {
						case 1:
							tabType = 1;
							break;
						case 2:
							tabType = 7;
							break;
						case 3:
							tabType = 3;
							break;
						case 4:
							tabType = 6;
							break;
						default:
							break;
					}
				} else {
					switch (this.currentDrawer) {
						case 1:
							tabType = 2;
							break;
						case 2:
							tabType = 8;
							break;
						case 3:
							tabType = 4;
							break;
						case 4:
							tabType = 5;
							break;
						default:
							break;
					}
				}
				this.$http.get('/client/biz/project/item/confirm/list', {
					project: this.project,
					tabType: tabType
				}).then(res => {
					this.confirmList = res
				});
			},
			changeTab(index) {
				this.current = index
				this.getConfirmList()
			},
			changeDrawer(index) {
				this.currentDrawer = index
				this.getConfirmList()
			},
			confirmChange(e) {
				this.confirmArr[e.name] = e;
				if (e.value == false) {
					this.confirmFooterDisplay = false;
				}
				this.confirmArr.forEach((item, index) => {
					if (item.value == true) {
						this.confirmFooterDisplay = true;
					}
				})
			},
			checkedAll(e) {
				if (e.value === true) {
					this.confirmFooterDisplay = true;
					this.confirmList.map((val, index) => {
						val.Checked = true;
						this.confirmArr[index] = {
							value: val.Checked,
							name: index
						};
					})
				} else {
					this.confirmFooterDisplay = false;
					this.confirmList.map((val, index) => {
						val.Checked = false;
						this.confirmArr[index] = {
							value: val.Checked,
							name: index
						};
					})
					this.confirmArr = [];
				}
			},
			confirmReject() {
				this.showRemark = true;
				console.log(this.rmkcontent);
			},
			goProject(project, iid) {
				uni.navigateTo({
					url: '/pages/repair/project/index?project=' + project + '&iid=' + iid
				});
			},
			//下拉刷新数据
			refreshList() {
				this.getConfirmList()
				if (!this.isRefreshed) {
					this.isRefreshed = true;
					setTimeout(e => {
						this.isRefreshed = false;
					}, 1500)
				}
			},
			confirmSubmit(stat) {
				this.confirmFooterDisplay = false;
				var iidArr = [];
				this.confirmArr.forEach((item, index) => {
					if (item.value == true) {
						iidArr.push(this.confirmList[index].Iid);
					}
				});
				if (stat == 2) {
					this.rmkcontent = "";
				}
				this.$http.post('/client/biz/project/item/log/confirm', {
					pid: this.project,
					iids: iidArr,
					stat: stat,
					rmk: this.rmkcontent,
				}).then(res => {
					uni.showToast({
						title: '操作成功',
					});
					this.getConfirmList();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: relative;
		border-bottom: 1px solid #dcdede;

	}

	.icon-zhankai {
		position: absolute;
		left: 50%;
		bottom: -40rpx;
		transform: translateX(-50%);
		font-size: 50rpx;
		color: #8c8d8d;

	}

	.container {
		background-color: #f1f1f1;
	}

	.bench-header {
		display: flex;
		justify-content: center;
		background-color: #fff;

		.bench-header-item {
			background-color: #fff;
			border: 1px solid #346fdc;
			width: 300rpx;
			padding: 10rpx 0;
			height: 70rpx;
			text-align: center;
			color: #676868;
		}

		.bench-header-item-active {
			color: #fff;
			background-color: #3489FF;
		}

	}

	.bench-header-item:nth-child(1) {
		border-right: none;
	}

	.drawer {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 10rpx 0 20rpx;

		.drawer-item {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			border-right: 1px solid #f1f1f1;
			padding: 0 20rpx;

			&:nth-child(4) {
				border-right: none;
			}

			.icon {
				font-size: 50rpx;
				color: #cdcdcd;
			}

			.icon-active {
				font-size: 50rpx;
				color: #0089FF;
			}

			.drawer-item-text {
				// overflow-wrap: break-word;
				// word-wrap: break-word;
				// word-break: break-word;
				overflow-wrap: break-word;

				word-wrap: break-word;

				word-break: break-word;
				color: #676868;
			}

			.text-active {
				color: #0089FF;
			}

		}
	}

	.content {
		display: flex;
	}

	.confirm-scroll {
		height: 100%;
		background-color: #f1f1f1;
	}

	.w-160 {
		width: 160rpx;
	}

	.mgr-20 {
		margin-right: 20rpx;
	}

	.mgr-30 {
		margin-right: 30rpx;
	}

	.mgt-10 {
		margin-top: 10rpx;
	}

	.detail {
		white-space: normal;
		word-break: break-all;
	}

	.nowrap {
		white-space: nowrap;
	}

	.confirm {
		padding-bottom: 100rpx;

		&-header {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 20rpx;
			background-color: #fff;

			&_state {
				margin-left: 38rpx;
				font-size: 26rpx;

				.block {
					display: inline-block;
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
			}

			&_state.gray {
				color: #909399;
				text-decoration: line-through;

				.block {
					background-color: #f4f4f5;
				}
			}

			&_state.red {
				color: #F05459;
				text-decoration: line-through;

				.block {
					background-color: #FDECED;
				}
			}

			&_state.blue {
				color: #409EFF;

				.block {
					background-color: #ecf5ff;
				}
			}

			&_state.green {
				color: #67c23a;

				.block {
					background-color: #e1f3d8;
				}
			}
		}

		&-footer {
			z-index: 99;
			position: fixed;
			width: 100%;
			bottom: 100rpx;
			text-align: center;
			background-color: #FFFFFF;
			display: flex;

			.u-btn {
				display: inline-block;
				margin: 20rpx;
			}
		}
	}

	.detail-repair_item.gray {
		background-color: #F4F4F5;
		text-decoration: line-through;

		.detail-repair_item--order {
			color: #909399;

			&::after {
				border-color: #909399;
			}
		}

		.detail-repair_item--child {
			text-decoration: line-through;
		}
	}

	.detail-repair_item.blue {
		background: #e1ecf9;

		.detail-repair_item--order {
			color: #409EFF;

			&::after {
				border-color: #409EFF;
			}
		}
	}

	.detail-repair_item.red {
		background: rgb(255, 232, 232);

		.detail-repair_item--order {
			color: #EA3B48;

			&::after {
				border-color: #EA3B48;
			}
		}
	}

	.detail-repair_item.green {
		background: #e5f6dc;

		.detail-repair_item--order {
			color: #67C23A;

			&::after {
				border-color: #67C23A;
			}
		}
	}

	.detail {
		height: 100%;
	}

	.detail-tabs {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
	}

	.detail-contnet {
		height: 100%;
		padding-top: 100rpx;

		&_swiper {
			min-height: 100%;
		}
	}

	.detail-header {
		// margin-top: 20rpx;
	}

	.detail-contnet_comment {
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.article-video {
		position: relative;
		padding-bottom: 30rpx;

		&_item {
			position: relative;
			margin-left: -30rpx;
			width: 100vw;
			// width: 100vw;
			// height: 100vh;
		}

		&_img {
			max-width: 690rpx;
			max-height: 300rpx;
			width: auto;
		}

		&_play {
			width: 62rpx;
			height: 62rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
			background: #505050;

			&--icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.article-item {
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx;

		.article-header {
			height: 85rpx;
			margin-bottom: 24rpx;

			&_avatar {
				margin-right: 26rpx;
			}

			&_name--text {
				font-size: 30rpx;
				color: #494949;
				font-weight: bold;
			}

			&_time {
				color: #999999;
				font-size: 26rpx;
			}

			&_comment {
				font-size: 26rpx;
				color: #0089FF;

				.icon {
					position: relative;
					top: 4rpx;
					font-size: 32rpx;
					margin-right: 6rpx;
				}
			}
		}

		.article-content {
			font-size: 30rpx;
			margin-bottom: 24rpx;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
			word-break: break-word;
		}

		.article-video {
			position: relative;
			padding-bottom: 30rpx;

			&_item {
				position: relative;
				margin-left: -30rpx;
				width: 100vw;
				// width: 100vw;
				// height: 100vh;
			}

			&_img {
				max-width: 690rpx;
				max-height: 300rpx;
				width: auto;
			}

			&_play {
				width: 62rpx;
				height: 62rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 5px;
				background: #505050;

				&--icon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.article-images {
			clear: both;
			overflow: hidden;
			padding-bottom: 10rpx;

			&_item {
				margin: 10rpx;
				float: left;
			}
		}

		.article-annex {
			color: #0089FF;
			margin-bottom: 20rpx;

			.u-icon {
				margin-right: 6rpx;
			}
		}
	}

	.item-reply-reply-time {
		white-space: nowrap;
		font-size: 22rpx;
		color: #999999;
	}

	.detail-comment {
		padding: 0 32rpx;
		background-color: #fff;
		overflow: hidden;

		&_item {
			padding: 18rpx 0 10rpx;

			.comment-item_avatar {
				margin-right: 12rpx;
			}

			.item-content_header {
				margin-bottom: 20rpx;
			}

			.item-content_header--name {
				font-size: 30rpx;
				color: #494949;
				font-weight: bold;
			}

			.item-content-time {
				font-size: 20rpx;
				color: #b8b8b8;
			}

			.item-content_header--time {
				font-size: 20rpx;
				color: #B0B3B8;
			}

			.item-content_text {
				color: #5D5D5F;
				word-break: break-all;
				word-break: break-word;
				white-space: pre-line;
			}
		}
	}

	.comment-box {
		padding: 24rpx 24rpx 20rpx;
		background: #F3F3F3;

		.inputStyle {
			padding: 20rpx;
			background: #FFFFFF;
			border: 1rpx solid #EAEAEA;
			border-radius: 8rpx;
		}
	}

	.comBtnStyle {
		margin-top: 14rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979ff;
		border-color: #2979ff;
		border-radius: 24rpx;
		float: left;
	}

	.btnStyle {
		margin-top: 14rpx;
		width: 118rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		background: #2979ff;
		border-color: #2979ff;
		float: right;
	}

	.detail-comment_header {
		height: 76rpx;
		background-color: #fff;
	}

	.comment-header_action {
		font-size: 24rpx;
		color: #0089FF;
	}

	.comment-header_title--icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 6rpx;
	}

	.comment-header_title--label {
		font-size: 30rpx;
		color: #131313;
	}

	.detail-repair_header {
		padding: 30rpx 34rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			margin-bottom: 20rpx;

			.icon {
				font-size: 30rpx;
				color: #0089FF;
				margin-right: 12rpx;
			}
		}

		&--text {
			font-size: 31rpx;
			// color: #131313;
			color: #0089FF;
		}

		&--price {
			color: #555555;
		}

		&--number {
			// color: #C50909;
			color: black
		}

		// &--button {
		// 	height: 50rpx;
		// 	width: 92rpx;
		// 	font-size: 28rpx;
		// 	color: #0089FF;
		// }
		&--button {
			height: 50rpx;
			width: 140rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
			color: #0089FF;
		}
	}

	.detail-repair_content {
		overflow: hidden;
		padding-bottom: 100rpx;

		.check-footer {
			z-index: 999;
			position: fixed;
			width: 100%;
			bottom: 0;
			text-align: center;
			background-color: #FFFFFF;

			.u-btn {
				display: inline-block;
				margin: 20rpx;
			}
		}
	}

	.detail-repair_item {
		width: 100%;
		padding: 30rpx 34rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			color: #000000;
			font-weight: 500;
			margin-bottom: 24rpx;
		}

		&--checkbox {
			margin: 0 9rpx 9rpx 0;
		}

		&--order {
			display: inline-block;
			min-width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-bottom: 8rpx;
			padding: 0 6rpx;
			color: #909399;
			font-size: 24rpx;
			text-align: center;

			&::after {
				border-radius: 12rpx;
			}
		}

		&--order_blue {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			margin-right: 12rpx;
			color: #409EFF;
			font-size: 24rpx;
			text-align: center;
			background-color: #ECF5FF;

			&::after {
				border-radius: 12rpx;
				border-color: #B3D8FF;
			}
		}

		&--info {
			clear: both;
			overflow: hidden;
		}

		&--price {
			color: #555555;
		}

		&--number {
			color: #C50909;
		}

		&--child {
			float: left;
			width: 50%;
			margin-bottom: 10rpx;
			color: #666666;

			&__value {
				color: #000;
				margin-right: 6rpx;
			}

			&__icon {
				color: #0089FF;
			}
		}

		.child-btn {
			width: inherit;
			float: right;
			display: inline-block;
			padding: 6rpx 12rpx;
			color: #666666;
			background-color: #FFFFFF;
			border-radius: 6rpx;
			// border: 1rpx solid #ddd;
			border: 1rpx solid #006EFF;

			&_count {
				color: #131313;
				margin-left: 10rpx;
			}
		}

		&--child:nth-child(2n) {
			text-align: right;
		}

		&--child.textarea {
			width: 100%;
		}

		&--footer {
			margin-top: 20rpx;
			padding-top: 20rpx;
			text-align: right;

			.u-btn {
				margin-left: 20rpx;
			}
		}
	}

	.detail-contract_header {
		padding: 36rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&--name {
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.icon {
				font-size: 36rpx;
				color: #fff;
				margin-right: 12rpx;
				padding: 4rpx;
				background: linear-gradient(0deg, #0089FF 0%, #349DF8 100%);
				background-color: #0089FF;
				border-radius: 30px;
			}
		}

		.repair-item_cell {
			+.repair-item_cell {
				margin-top: 24rpx;
			}

			&--label {
				color: #666666;
			}

			&--value {
				color: #000000;
			}
		}
	}

	.detail-contract_content {
		overflow: hidden;

		.detail-comment_header {
			height: 88rpx;
			padding: 0 27rpx;
		}

		.article-item {
			margin-bottom: 24rpx;
		}
	}

	.detail-contract_attrs {
		margin: 30rpx auto;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #edf5fc;
	}

	.fixed-publish {
		z-index: 9999;
		position: fixed;
		right: 4rpx;
		bottom: 200rpx;
	}

	.project-header {
		&_item {
			margin: 0 16rpx 16rpx 0;

			.icon {
				color: #0089FF;
				margin: 0 6rpx;
			}
		}

		&_item.current {
			display: inline-block;
			padding: 0 18rpx;
			color: #0089FF;
			line-height: 1.6;
			// background: #E9F4FE;
			border-radius: 4rpx;
		}

		&_item.hidden {
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}

	.empty-cnt {
		background-color: #fff;

		.u-empty {
			padding: 100rpx 0;
		}
	}

	.detail-repair_group {
		display: block;

		.tag {
			margin-left: 8rpx;
			padding: 2rpx 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #c9d8e8;
			border-radius: 4rpx;
		}
	}

	.mgb-10 {
		margin-bottom: 10rpx;
	}

	.search-header {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.search-content {
		overflow: hidden;
	}

	.like-staffs {
		font-size: 30rpx;
		font-family: sans-serif;
		color: #515b7c;
		background-color: #F5F5F5;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		word-break: break-word;
	}

	.check-box {
		width: 600rpx;
		padding: 40rpx;
	}

	.check-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.check-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
	}

	.publish {
		padding-bottom: 100rpx;
		min-height: 100vh;
		background-color: #fff;

		&-input {
			padding: 30rpx;
			width: 100%;
		}
	}

	.publish-images {
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		clear: both;
		overflow: hidden;

		&_item {
			position: relative;
			margin: 10rpx;
			float: left;

			.u-icon {
				z-index: 999;
				position: absolute;
				top: 6rpx;
				right: 6rpx;
				background-color: #FFFFFF;
				border-radius: 42px;
			}
		}
	}

	.publish-friends {
		padding: 0 30rpx;

		&_item {
			font-size: 28rpx;
			color: #0073DB;
		}
	}

	.uploader_video {
		position: relative;
		width: 118rpx;
		height: 118rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.close-icon {
			z-index: 99999;
			position: absolute;
			top: 4rpx;
			right: 4rpx;

			.u-icon {
				background: #FFFFFF;
				border-radius: 100%;
			}
		}

		&_play--icon {
			width: 36rpx;
			height: 36rpx;
			z-index: 999;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
			background: #505050;
		}
	}

	.publish-handle {
		z-index: 999;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f1f1f1;

		&_content {
			padding: 20rpx 30rpx;
		}

		&_left {
			font-size: 48rpx;
			color: #777777;

			&--item {
				padding: 0 16rpx;
			}

			.icon {
				font-size: 48rpx;
				// margin-right: 20rpx;
			}
		}

		&_right {
			color: #999999;
		}
	}

	.video {
		z-index: 9;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.rich-val {
		word-break: break-all;
		word-break: break-word;
		white-space: pre-line;

	}

	.search_input {
		margin-top: 20rpx;
	}

	.history {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 10rpx;
	}

	.history_text {
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.history_viewContent {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		padding: 10rpx 20rpx;
	}

	.history_view {
		background-color: #fff;
		padding: 4rpx 20rpx;
		margin-right: 20rpx;
		border: 1px solid #f1f1f1;
		border-radius: 30rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.fire_text {
		margin-left: 10rpx;
		font-size: 12px;
	}

	.fire_search {
		margin-top: 20rpx;
	}

	.fire_viewContent {
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		display: flex;
		padding: 0 40rpx;
	}

	.fire_view {
		background-color: #E2E0E0;
		padding: 4rpx 20rpx 4rpx 20rpx;
		margin-top: 20rpx;
		min-width: 200rpx;
		flex-shrink: 0;
		border: 1px solid grey;
		border-radius: 15rpx;
		text-align: center;
	}

	.fire_viewContent:after {
		content: '';
		width: 30%;
	}

	.history_hr {
		width: 95%;
		margin-top: 40rpx;
		// text-align: center;
		height: 300rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// overflow:hidden;
		border-radius: 20rpx;
		border: 1px solid grey;
		margin-left: auto;
		margin-right: auto;
	}

	.h_content {
		margin-top: 20rpx;
	}

	// 这里是hr人事的
	.h_title {
		margin-left: 20rpx;
	}

	.h_view_wrap {
		display: flex;
		text-align: center;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		float: left;
	}

	.h_view {
		border: 1px solid grey;
		margin-top: 20rpx;
		min-width: 200rpx;
		border-radius: 20rpx;
		padding: 4rpx 20rpx 4rpx 20rpx;
	}

	.shareBtn {
		border-radius: 10rpx;
		padding: 10rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}

	.tabPage {
		width: 100%;
		margin-top: 20rpx;
	}
</style>
